<template>
  <nav>
    <h3 id="logo">
      <img
        class="logo"
        src="../assets/images/favicon.png"
        alt=""
      />魔数水晶球v2.3.4
    </h3>
    <div class="notice">
      <div id="noticeName">通知公告：</div>
      <div id="notice"></div>
    </div>
    <div class="navRight">
      <ul class="navBar">
        <li id="dataFull" class="s1 activeh pp">
          <img
            class="icon"
            src="https://crystalball.wasu.com/crystalBall-authority/style/images/nav_icon_detail.svg"
            alt=""
          /><span>数据详情</span>
        </li>
        <li id="helpCenter" class="s1 pp">
          <img
            class="icon"
            src="https://crystalball.wasu.com/crystalBall-authority/style/images/nav_icon_help.svg"
            alt=""
          />帮助中心
        </li>

        <li id="userimgh">
          <img
            class="icon"
            src="https://crystalball.wasu.com/crystalBall-authority/style/images/nav_icon_person.svg"
            alt=""
          />王昊
        </li>

        <li class="linea"></li>
        <li id="changePass">
          <img
            class="icon"
            src="https://crystalball.wasu.com/crystalBall-authority/style/images/nav_icon_password.svg"
            alt=""
          />修改密码
        </li>
        <li id="logout">
          <img
            class="icon"
            src="https://crystalball.wasu.com/crystalBall-authority/style/images/nav_icon_exit.svg"
            alt=""
          />注销
        </li>
      </ul>
    </div>
  </nav>
</template>

<script>
export default {
  name: "HeaderNav",
};
</script>

<style scoped>
/* 头部样式 */
nav {
  width: 100%;
  text-align: center;
  background: RGBA(16, 35, 64, 1);
  color: #eee;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 50px;
  z-index: 13;
  line-height: 50px;
  /*background: -webkit-linear-gradient( bottom, #162436, #293c55);
				background: linear-gradient( bottom, #162436, #293c55);*/
}

nav h3 {
  position: absolute;
  left: 15px;
  top: 0;
  font-size: 20px;
  float: left;
  height: 50px;
  width: 244px;
  cursor: pointer;
  color: #ffffff;
}

nav h3 .logo {
  position: absolute;
  width: 32px;
  height: 32px;
  top: 9px;
  left: 10px;
}

.icon {
  position: relative;
  width: 20px;
  height: 20px;
  top: -2px;
  left: -5px;
}

nav .navRight {
  position: absolute;
  top: 0;
  right: 10px;
  /*width: ;*/
  height: 50px;
}

.navRight .navBar {
  float: right;
  font-size: 0;
  list-style: none;
  height: 50px;
}

.navRight .navBar > li {
  /*background: #293c55;*/
  position: relative;
  color: #bfbfbf;
  display: inline-block;
  width: 100px;
  overflow: hidden;
  font-size: 14px;
  margin: 0 4px;
  padding: 0;
}

.navRight .navBar > li:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

.navRight .navBar > .open {
  color: #f9f9f9;
  background: #162436;
}

.navRight .navBar > .open .dropdown {
  display: block;
}

.navRight .navBar > li:hover {
  color: #f6f7f8;
  /*color:#fff;*/
  /*background: #162436;*/
  cursor: pointer;
}
#dataFull {
  border-radius: 4px;
  display: inline-block;
}
#dataFull:hover {
  background-color: #0082ba !important;
}
/*.activeh:hover{*/
/*	background-color: #0082BA !important;*/
/*}*/
.navRight .navBar > li {
  color: #5a6984;
}

.notice {
  position: absolute;
  left: 260px;
  top: 0;
  line-height: 50px;
  font-size: 14px;
  width: 440px;
  height: 50px;
}

.notice div {
  float: left;
  height: 50px;
}

#noticeName {
  width: 70px;
}

#notice {
  width: 370px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
</style>